<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/public.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/index.css"type="text/css"media="all">
    <script src="./js/vue.global.js"></script>
    <title>Document</title>
</head>
<body>
            <div class="box" id="app">
                <!--甘牧霖199010232-->
                    <div class="head">
                        <h2>登录账号</h2>
                    </div>    
                    <div class="content">
                        <div class="register">
                            <ul>
                                <li class="name">
                                    <span>用户名:</span>&nbsp;
                                    <input type="text" name="name" placeholder="英文、数字长度为6-10个字符" required
                                     v-model="username">
                                </li>
                                <li class="word">
                                    <span>密码:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="password"  name="password" placeholder="长度为6-16个字符" required
                                     v-model="password" @keyup.enter="onEnter()">
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="enter">
                        <button @click="onEnter()">立即登录</button>
                    </div>
            </div>
        
        <script>
            const app = Vue.createApp({
                data() {
                    return {
                        user:[

                            {
                                username:'admin',
                                password:'123456'
                            }
                        ],
                        username:'',
                        password:'',                       
                    }
                },
                methods: {
                    onEnter(){
                        if (this.username=='' || this.password=='') {
                            alert("账号或密码不能为空");
                        }
                        else{
                            for (let i = 0; i < this.user.length; i++) {
                                if (this.username==this.user[i].username&&
                                    this.password==this.user[i].password) {
                                    alert('登录成功');
                                } else {
                                    alert('用户名或密码错误');
                                }
                            }
                        }
                    }
                },
            }).mount('#app')
        </script>
</body>
</html>